<div class="wrapper">
  <page-title></page-title>

  @if (isScheduleSection()) {
    <div class="week-month-selector">
      <button
        (click)="selectTimeView('week')"
        [class.active]="selectedTimeView() === 'week'"
        class="week-month-btn week-btn"
        matTooltip="View Week"
        mat-icon-button
      >
        <mat-icon>view_week</mat-icon>
      </button>
      <button
        (click)="selectTimeView('month')"
        [class.active]="selectedTimeView() === 'month'"
        class="week-month-btn month-btn"
        matTooltip="View Month"
        mat-icon-button
      >
        <mat-icon>calendar_month</mat-icon>
      </button>
    </div>
  }

  <nav class="action-nav">
    @if (showDesktopButtons()) {
      <button
        (click)="layoutService.showAddTaskBar()"
        matTooltip="{{ T.MH.ADD_NEW_TASK | translate }} {{
          kb.addNewTask ? '[' + kb.addNewTask + ']' : ''
        }}"
        class="tour-addBtn"
        mat-icon-button
      >
        <mat-icon>add</mat-icon>
      </button>
    }

    @if (isSyncIconEnabled()) {
      <button
        class="sync-btn"
        matTooltip="{{ T.MH.TRIGGER_SYNC | translate }}"
        (click)="syncIsEnabledAndReady() ? sync() : setupSync()"
        (longPress)="setupSync()"
        (contextmenu)="$event.preventDefault(); setupSync()"
        mat-icon-button
      >
        @if (syncIsEnabledAndReady()) {
          @if (isOnline()) {
            @if (syncState() === 'ERROR') {
              <mat-icon>sync_problem</mat-icon>
            } @else {
              <mat-icon [class.spin]="isSyncInProgress()">sync</mat-icon>
            }
            @if (syncState() === 'IN_SYNC') {
              <mat-icon class="sync-state-ico">check</mat-icon>
            }
          } @else {
            <mat-icon>wifi_off</mat-icon>
          }
        } @else {
          <mat-icon>sync_disabled</mat-icon>
        }
      </button>
    }

    <plugin-header-btns></plugin-header-btns>

    @if (isUserProfilesEnabled()) {
      <user-profile-button></user-profile-button>
    }

    @if (isTimeTrackingEnabled()) {
      <play-button
        [currentTask]="currentTask()"
        [currentTaskId]="currentTaskId()"
        [currentTaskContext]="currentTaskContext()"
        [pomodoroIsEnabled]="pomodoroIsEnabled()"
        [pomodoroIsBreak]="pomodoroIsBreak()"
        [pomodoroCurrentSessionTime]="pomodoroCurrentSessionTime()"
      ></play-button>
    }

    @if (isFocusModeEnabled() && !isXxxs()) {
      <focus-button></focus-button>
    }

    <!-- Desktop: Show all buttons inline -->
    @if (showDesktopButtons()) {
      <!-- Simple counter buttons -->
      @for (
        simpleCounter of enabledSimpleCounters();
        track trackById($index, simpleCounter)
      ) {
        <simple-counter-button
          [matTooltip]="simpleCounter.title"
          [simpleCounter]="simpleCounter"
        ></simple-counter-button>
      }

      <plugin-side-panel-btns></plugin-side-panel-btns>

      <desktop-panel-buttons
        [kb]="kb"
        [isRouteWithSidePanel]="isRouteWithSidePanel()"
        [isShowScheduleDayPanel]="isShowScheduleDayPanel()"
        [isShowIssuePanel]="isShowIssuePanel()"
        [isShowNotes]="isShowNotes()"
      ></desktop-panel-buttons>
    }

    <!-- Mobile: Show dropdown menus -->
    @if (isXs()) {
      <!-- Simple counter mobile dropdown -->
      @if (enabledSimpleCounters().length) {
        <div class="mobile-dropdown-wrapper">
          <button
            (click)="isShowSimpleCounterBtnsMobile.set(!isShowSimpleCounterBtnsMobile())"
            [color]="isCounterRunning(enabledSimpleCounters()) ? 'accent' : ''"
            mat-icon-button
          >
            <mat-icon>{{ isShowSimpleCounterBtnsMobile() ? 'close' : 'timer' }}</mat-icon>
          </button>
          <div
            class="mobile-dropdown"
            [class.isVisible]="isShowSimpleCounterBtnsMobile()"
          >
            @for (
              simpleCounter of enabledSimpleCounters();
              track trackById($index, simpleCounter)
            ) {
              <simple-counter-button
                [simpleCounter]="simpleCounter"
              ></simple-counter-button>
            }
          </div>
        </div>
      }
    }
  </nav>
</div>
